import React from 'react'
import {Input,Form, Button} from "antd-mobile"
import request from '../../api/request'
import { useNavigate} from 'react-router-dom'
import { loginSuccess } from '../../store/user/userSlice';
import { useDispatch } from 'react-redux';

function Login() {
    const navigate=useNavigate();
    const dispatch=useDispatch()
    const onFinish =async(value)=>{
        console.log(value);
        const res=await request.post('/login',value).then(res=>{
            console.log('res',res.data);
            const {code,data,message}=res.data
            if(code==200){
                alert(message)
                dispatch(loginSuccess(data))
                navigate('/user')
            }
            else{
                alert(message)
            }
            })
    }
  return (
    <div>
        <h3 style={{textAlign:'center', lineHeight:"50px"}}>账号登录</h3>
      <Form onFinish={onFinish} layout='horizontal' footer={<Button block color='primary' type='submit'>登录</Button>}>
        <Form.Item label="账号" name="username" rules={[{ required: true, message: '账号不能为空' },{pattern:/^1[3-9]\d{9}$/,message:"请输入正确的手机号"}]}>
            <Input></Input>
        </Form.Item>
        <Form.Item label="密码" name="password" rules={[{ required: true, message: '密码不能为空' },{min:6,max:12,message:"密码不能少于6-12位"}]}>
            <Input></Input>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Login
